<template>
  <div class="content">
    <div class="box">
      <div class="login">
        <div class="logo" style="left: -347px;
        position: relative;
        top: -146px;
    ">
          <img src="../assets/images/crm_logo3.png" alt="">
        </div>
        <div class="left">

          <img src="../assets/images/log_on_104.png" alt="">
        </div>
        <div class="right">
          <h2 style="margin:50px 0 -33px 75px;font-size: 20px;font-weight: 500; color: #fe0100">欢迎登录</h2>
          <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="80px">
            <img src="../assets/images/log_on_107.png" alt="" style="position: relative;
            top: 55px;
            left: 90px;
            z-index: 1;">
            <el-form-item prop="username">
              <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <img src="../assets/images/log_on_111.png" alt="" style="position: relative;
            top: 55px;
            left: 90px;
            z-index: 1;">
            <el-form-item prop="password">
              <el-input placeholder="密码" @keyup.enter="login" type="password" v-model="ruleForm.password" show-password>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-top:26px;margin-bottom:26px;margin-left: 10px;">
              <el-checkbox v-model="checked" style="color:#a0a0a0;margin-top:-10px;">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button @click="login"
                style="box-shadow:1px 5px 10px 3px #fe00003a;font-size:16px;width: 304px;border-radius: 50px;background-color: #fe0100;color: #fff ; height: 50px;">
                登录</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Login',
    data() {
      return {
        checked: true,

        ruleForm: {  //初始值
          username: '',
          password: ''
        },
        rules: {  //验证校验
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    mounted() {
      // this.goto()
    },
    methods: {
      // goto(){
      //   let {username,password}= this.ruleForm;
      //   this.$axios({
      //     methods:'post',
      //     url:'http://192.168.2.53:9050/api/crm/user/login',
      //     data:{username:username,password,password}
      //   }).then(res=>{
      //     console.log(res)
      //   })
      // }
      //网络请求
      // this.$router.push({ path: '/Home' });

      async login() {
        // 解构出参数
        const that = this
        const { username, password } = this.ruleForm;
        var data = {
          username: username,
          password: password,
        }
        //let result = await this.$API.login.reqLogin(data);
        axios({
          url: '/api/crm/user/login',
          method: 'post',
          data: data,
        }).then(function (response) {
          console.log(response.data)
          if (response.data.code == '200') {

            that.$router.push({ path: '/Home' })
            axios.defaults.headers.common["token"] = response.data.message;
            that.$cookies.set("message", response.data.message)
            that.$cookies.set("userId", response.data.data[0].userId)
            that.$cookies.set("userAuth", response.data.data[0].userAuth)
            that.$cookies.set("realname", response.data.data[0].realname)
            that.$cookies.set("username", response.data.data[0].realname)
          } else {
            console.log(response.data.message)
            alert('用户名或密码错误')
          }
        });
        // this.$router.push({ path: '/Home' });

        // if(result.data.code = '200'){
        //   alert(result.data.code)
        //   this.$router.push({ path: '/Home' });
        // }else{
        //   alert(this.message)
        // }

      },

    },
  }
</script>
<style scoped>
  @import "../style/style.css";

  /* .content{
    margin: 0;
 
    border: 0px solid #000;
    background-image: url(../assets/images/log_on1.jpg) ;
    background-repeat: no-repeat;
  background-position: right top;
  } */
  .login .right>>>.el-form-item {
    margin-bottom: -22px;
  }

  .login .right>>>.el-input {
    width: 280px;
  }

  .login .right>>>.el-input__inner {
    border-radius: 50px;
    width: 304px;
    margin-left: -10px;
    height: 50px;
    padding-left: 62px;
    font-size: 16px;

  }

  .box {
    background-image: url(../assets/images/log_on1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: none;
    height: 935px;
    padding: 1px;
  }

  .box .login {
    border: 0px solid #000;
    height: 500px;
    width: 1100px;
    margin: 200px auto;
  }

  .box .login .left {
    width: 639px;
    height: 300px;
    border: 0px solid #000;
    float: left;
    margin-top: 80px;

  }

  .box .login .right {
    float: right;
    border: 0px solid #000;
    width: 445px;
    height: 447px;
    /* margin-top: 0px; */


    line-height: 50px;
    border-radius: 10px;
    background-image: url(../assets/images/log_on.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: none;
  }
  .box>>>.el-input__inner{
    background-color: rgba(238, 238, 238, 0.618);
  }
  .login .right>>>.el-checkbox__input.is-checked+.el-checkbox__label{
    color: #fe0100;
  }
  .login .right>>>.el-checkbox__input.is-checked .el-checkbox__inner{
    background-color:#fe0100;
    border-color: #fe0100;
  }
</style>